import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/route_manager.dart';
import 'package:smart_shoes/define/define_colors.dart';
import 'package:smart_shoes/tools/widget_tools.dart';

class DangerWarningPage extends StatefulWidget {
  const DangerWarningPage({super.key});

  @override
  State<DangerWarningPage> createState() => _DangerWarningPageState();
}

class _DangerWarningPageState extends State<DangerWarningPage> {
  bool _showBottomSheet = false;
  RangeValues _rangeValues = RangeValues(10, 100);
  List<String> title = ["开启安全距离预警", "设置提示铃声", "设置安全距离"];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: WidgetTools().TextTitle("距离预警")),
      backgroundColor: CustomColors.backgroundColor,
      body: Column(
        children: [
          Container(
            padding: EdgeInsets.all(22),
            color: Colors.white,
            alignment: Alignment.center,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Image.asset("assets/images/alarm.png"),
                SizedBox(height: 16.5),
                Text(
                  "设备与家长手机超出设定距离触发警报",
                  style: TextStyle(fontSize: 12, color: CustomColors.textColor),
                ),
              ],
            ),
          ),
          SizedBox(height: 3.5),
          Container(
            width: double.infinity,
            height: 123,
            color: Colors.white,
            child: ListView.builder(
              itemCount: 3,
              itemBuilder: (context, index) {
                return _item(title[index], index);
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget _item(String title, int index) {
    Widget lView = Switch(value: false, onChanged: (onChanged) {});

    if (index > 0) {
      lView = Image.asset("assets/images/jiantou-up-b.png");
    }
    return GestureDetector(
      onTap: () {
        if (title == "设置安全距离") {
          _showDistanceSettingSheet();
        }
      },
      child: Container(
        color: Colors.white,

        height: 41,
        padding: EdgeInsets.all(12),
        child: Row(
          children: [
            Text(
              title,
              style: TextStyle(fontSize: 14, color: CustomColors.textColor),
            ),
            Expanded(child: SizedBox()),
            lView,
          ],
        ),
      ),
    );
  }

  // 新增：显示底部弹窗
  void _showDistanceSettingSheet() {
    setState(() {
      _showBottomSheet = true;
    });
    showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      isScrollControlled: true,
      builder: (context) => _buildDistanceSettingSheet(),
    ).then((_) {
      setState(() {
        _showBottomSheet = false;
      });
    });
  }

  Widget _buildDistanceSettingSheet() {
    return StatefulBuilder(
      builder: (BuildContext context, StateSetter setModalState) {
        return GestureDetector(
          onTap: () {},
          child: Container(
            padding: EdgeInsets.all(17),
            color: Colors.white,
            constraints: BoxConstraints(maxHeight: 195),
            child: Column(
              children: [
                Stack(
                  children: [
                    Align(
                      alignment: Alignment.center,
                      child: Text("安全距离区间(米)"),
                    ),
                    Row(
                      children: [
                        GestureDetector(
                          child: Text("取消"),
                          onTap: () {
                            Navigator.pop(context);
                          },
                        ),
                        Spacer(),
                        GestureDetector(
                          child: Text("确定"),
                          onTap: () {
                            Navigator.pop(context);
                          },
                        ),
                      ],
                    ),
                  ],
                ),
                SizedBox(height: 27),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      "${_rangeValues.start.round()}m",
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(width: 23),
                    Container(height: 0.34, width: 28, color: Colors.grey),
                    SizedBox(width: 23),
                    Text(
                      "${_rangeValues.end.round()}m",
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),

                Container(
                  padding: EdgeInsets.symmetric(horizontal: 12),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: List.generate(20, (index) {
                      // 从10到200，共20个刻度点
                      double value = 10 + index * 10; // 10,  200
                      return Column(
                        children: [
                          Container(
                            width: 1,
                            height: index % 5 == 0 ? 12 : 6, // 每50米(5个刻度)显示长刻度
                            color: Colors.grey,
                          ),
                          if (index % 5 == 0) // 每50米显示数值
                            Text(
                              "${value.toInt()}",
                              style: TextStyle(fontSize: 10),
                            ),
                        ],
                      );
                    }),
                  ),
                ),
                // 修改滑块部分
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 12),
                  child: RangeSlider(
                    values: _rangeValues,
                    min: 10,
                    max: 200,
                    divisions: 190,
                    activeColor: CustomColors.greenColor, // 设置活动颜色
                    inactiveColor: Colors.grey[300],
                    onChanged: (values) {
                      setModalState(() {
                        _rangeValues = values;
                      });
                      if (mounted) {
                        setState(() => _rangeValues = values);
                      }
                    },
                  ),
                ),

                // // 修改滑块部分
                // AbsorbPointer(
                //   child: RangeSlider(
                //     values: _rangeValues,
                //     min: 10,
                //     max: 200,
                //     divisions: 190,
                //     activeColor: CustomColors.greenColor,
                //     inactiveColor: Colors.grey[300],
                //     onChangeStart: (values) {
                //       // 开始滑动时处理
                //     },
                //     onChangeEnd: (values) {
                //       // 滑动结束时处理
                //     },
                //     onChanged: (values) {
                //       if (mounted) {
                //         setState(() => _rangeValues = values);
                //       }
                //     },
                // ),
              ],
            ),

            // // 范围滑块
            // Listener(
            //   behavior: HitTestBehavior.opaque,
            //   child: RangeSlider(
            //     values: _rangeValues,
            //     min: 10,
            //     max: 200,
            //     divisions: 190, // (200-10)/10=19段
            //     labels: RangeLabels(
            //       "${_rangeValues.start.round()}米",
            //       "${_rangeValues.end.round()}米",
            //     ),
            //     onChanged: (RangeValues values) {
            //       if (mounted) {
            //         // 添加mounted检查防止dispose后调用
            //         setState(() {
            //           _rangeValues = values;
            //         });
            //       }
            //     },
            //   ),
            // ),
            // 范围滑块
            // RangeSlider(
            //   values: _rangeValues,
            //   min: 10,
            //   max: 200,
            //   divisions: 190, // (200-10)/10=19段
            //   labels: RangeLabels(
            //     "${_rangeValues.start.round()}米",
            //     "${_rangeValues.end.round()}米",
            //   ),
            //   onChanged: (RangeValues values) {
            //     if (mounted) {
            //       // 添加mounted检查防止dispose后调用
            //       setState(() {
            //         _rangeValues = values;
            //       });
            //     }
            //   },
            // ),
          ),
        );
      },
    );
  }
}
